<%@ taglib prefix="v-bind" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../../static/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/global.css">
</head>
<body>
<div id="content">
    <div class="admin-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>导入教师信息</legend>
        </fieldset>

        <form class="layui-form" action="" method="post">
            <%--院校 Begin--%>
            <div v-cloak>
                <div class="layui-form-item">
                    <div>
                        <label class="layui-form-label">所属系</label>
                        <div class="layui-input-inline">
                            <select name="department" lay-filter="department" lay-search>
                                <option value="">选择系部</option>
                            </select>
                        </div>
                        <%--<div class="layui-input-inline">--%>
                        <%--<select name="major" lay-filter="major" lay-search>--%>
                        <%--<option value="">选择专业</option>--%>
                        <%--</select>--%>
                        <%--</div>--%>
                        <%--<div class="layui-input-inline">--%>
                        <%--<select name="clazz" lay-filter="clazz" lay-search>--%>
                        <%--<option value="">选择班级</option>--%>
                        <%--</select>--%>
                        <%--</div>--%>
                    </div>
                </div>
            </div>
            <%--院校 End--%>
            <div class="layui-form-item">
                <label class="layui-form-label">导入教师</label>
                <div class="layui-input-inline">
                    <input type="file" name="fileUp" id="student" lay-type="file" class="layui-upload-file">
                </div>
                <div class="layui-input-inline">
                    <a href="/download/TeacherTemp" class="layui-btn layui-btn-normal layui-btn-small">下载导入数据模板</a>
                </div>
            </div>
        </form>
        <fieldset class="layui-elem-field">
            <legend>教师信息</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table">
                    <thead>
                    <tr>
                        <th>工号</th>
                        <th>姓名</th>
                    </tr>
                    </thead>
                    <%--内容容器--%>
                    <tbody id="content1">
                    </tbody>
                </table>
            </div>
        </fieldset>

        <%--分页容器--%>
        <div class="admin-table-page">
            <div id="paged" class="page">
            </div>
        </div>
    </div>
</div>
</body>
<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.data, function(index, item){ }}
    <tr>
        <td>{{ item.user.workid || "-" }}</td>
        <td>{{ item.user.realname || "-" }}</td>
    </tr>
    {{# }); }}
</script>
<script type="text/javascript" src="/static/common/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script type="text/javascript" src="/static/common/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/common/layui/layui.js"></script>
<script type="text/javascript" src="/static/common/vue.min.js"></script>
<script type="text/javascript" src="/static/common/axios.min.js"></script>
<script type="text/javascript">
    var userid = ${sessionScope.currentUser.getId()};
    console.log(userid);
</script>
<script>
    layui.config({
        base: '/static/js/layuiModulesEX/'
    });
    layui.use(['form', 'upload', 'jquery', 'layer', 'paging'], function () {
        var form = layui.form(),
            $ = layui.jquery,
            paging = layui.paging(),
            layer = layui.layer;

        //联动对象
        var linkage = {};
        //渲染下拉框
        linkage.formRender = function (obj, tip) {
            $(obj).empty();
            $(obj).append('<option value="">' + tip + '</option>');
            form.render('select');
        };
        // 初始无数据存在，不可进行更改，只赋值
        linkage.read = function (obj, url) {
            axios.get(url)
                .then(function (res) {
                    var array = res.data.data;
                    var html = '';
                    for (var i in array) {
                        html += '<option value=' + array[i].id + '>' + array[i].name + '</option>';
                    }
                    $(obj).append(html);
                    form.render('select');
                    console.log(res);
                    // if (init)
                    //     $(obj).next().find('[lay-value="' + id + '"]').click();
                })
                .catch(function (res) {
                    console.log(res);
                });
        };

        var department = 'form select[name=department]';

        axios.get('/schoolMangerInfo/findByUserId/' + userid)
            .then(function (res) {
                console.log(res.data.data);
                vm.teacherInfo.schoolId = res.data.data.schoolid;
                linkage.read(department, '/department/findBath/' + res.data.data.schoolid);

                paging.init({
                    openWait: true,
                    url: '/teacherInfo/findDetailBatchBySchoolIdCondition',
                    elem: '#content1', //内容容器
                    params: { //发送到服务端的参数
                        schoolid: res.data.data.schoolid
                    },
                    contentType: "application/json; charset=utf-8",
                    type: 'POST',
                    tempElem: '#tpl', //模块容器
                    pageConfig: { //分页参数配置
                        elem: 'paged', //分页容器
                        pageSize: 10 //分页大小
                    },
                    success: function (res) { //渲染成功的回调
                        //alert('渲染成功');
                        console.log(res);
                    },
                    fail: function (msg) { //获取数据失败的回调
                        //alert('获取数据失败')
                    },
                    complate: function () { //完成的回调
                        //alert('处理完成');


                    }
                });
            })
            .catch(function (res) {
                console.log(res);
            });


        var vm = new Vue({
            el: '#content'
            , data: {
                teacherInfo: {}
            }
            , methods: {}

        });
        linkage.formRender(department, "选择系");

        form.on('select(department)', function (data) {
            vm.teacherInfo.departmentId = data.value;
        });

        layui.upload({
            url: '/upload/addTeacherBatch', //上传接口
            elem: '#student'
            , success: function (res) { //上传成功后的回调
                console.log(res);
                paging.get();
            }
            , before: function (input) {
                console.log('文件上传中');
                //与文件一同上传的信息
                var data = {
                    "schoolId": vm.teacherInfo.schoolId,
                    "departmentId": vm.teacherInfo.departmentId
                };
                extraData(input, data);
            }
        });
    })
</script>
</html>

